<template>
	<view :class="AppStyle">
		<!-- 顶部菜单 -->
		<view class="home-nav metaList" :style="'top:'+CustomBar+'px'">
			<scroll-view scroll-x class="bg-white nav " scroll-with-animation :scroll-left="scrollLeft">
				<view class="cu-item" :class="item.mid==TabCur?'text-blue cur':''" v-for="(item,index) in metaList"
					:key="index" @tap="tabSelect" :data-id="item.mid">
					{{item.name}}
				</view>
			</scroll-view>
		</view>

		<view class="info-content">
			<paiHangBang :showMore='true' url='' :topList='topList' title='相关投票' :showNum='true'></paiHangBang>
		</view>
	</view>

</template>

<script>
	import paiHangBang from '@/components/paihang/paiHangBang.vue'
	export default {
		components: {
			paiHangBang
		},
		data() {
			return {
				AppStyle: 'bg-wite-page',
				CustomBar: this.CustomBar,
				metaList: [{
					"mid": 0,
					"name": "日排行",
					"parent": 0
				}, {
					"mid": 1,
					"name": "周排行",
					"parent": 0
				}, {
					"mid": 2,
					"name": "月排行",
					"parent": 0
				}, ],
				TabCur: 0,
				scrollLeft: 0,
				topList: [{
					"id": 0,
					"title": "求大佬做一个云端拦截码",
				}, {
					"id": 1,
					"title": "QR Cloud机器人框架开发思路解析",
				}, {
					"id": 3,
					"title": "2022年二批处分名单",
				}, {
					"id": 4,
					"title": "天神项目组-新年寄语",
				}, {
					"id": 1123,
					"title": "北极鲶鱼背景到底有多牛",
				}, {
					"id": 32,
					"title": "五一实际放假天数为1天",
				}, {
					"id": 321,
					"title": "特朗普会挑起美国新的南北战争吗？",
				}, {
					"id": 12,
					"title": "有没有感觉时间流逝的越来越快？",
				}, {
					"id": 234,
					"title": "后疫情时代，该如何整理自己的人生，实现自己的价值？",
				}, {
					"id": 234,
					"title": "ChatGPT催生的人工智能最终会打败人类吗？",
				}],

			}
		},
		methods: {
			toType() {

			},
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
			},
			goCategory() {
				uni.navigateTo({
					url: '/pages/contents/allcategory'
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.all-box {}

	.search-his {
		margin: 100rpx 30upx 20rpx 30upx;
	}

	.bg-white-alpha {
		background: rgba(255, 255, 255, 0.5);
	}

	.search-his-nav {
		display: flex;
		background-color: #ffffff;
		justify-content: space-between;
	}

	.search-his-nav .search-his-label-left {
		font-weight: bold;

	}

	.search-his-nav .search-his-label-left .search-his-title-left {
		color: #000000 !important;
	}

	.search-his-nav .search-his-label-right {
		color: #78909C !important;
	}

	.search-his-nav .search-his-label-right .search-his-title-right {
		color: #78909C !important;
	}

	.search-his .search-box {
		margin-top: 10rpx;
	}

	.search-his .search-box .search-box-item {
		display: inline-block;
		line-height: 40rpx;
		padding: 10rpx 25rpx;
		margin: 20rpx 10rpx 2rpx 0rpx;
		background-color: #F8F7F8 !important;
		color: #AAAAAA !important;
		border-radius: 2500rpx !important;
		font-size: 12rpx;
	}

	.search-his .search-box .search-box-item {}

	.search-his .search-box .search-box-item .search-box-item-prefix {}

	.margin-10 {
		margin-left: 10rpx;
		color: #78909C !important;
	}
</style>
